<!-- 
    time：20024-4-15
    name：meidusa 
    role：table封装公共组件
 -->

<template>
    <div>
        <Table :tableData="tableData" :tableOptions="tableOptions" :tableColumnOptionsData="tableColumnOptionsData"
            :operateOptions="operateOptions" :pagerOptions="pagerOptions" @updateTableData="updateTableDataFn"></Table>
    </div>
</template>
  
<script setup lang="ts">
import Table from "@/components/Table/index.vue";
import { TableOptions, TableData, OperateOptions, TableColumnOptions, PagerOptions } from '@/components/Table/type/index'
import { reactive } from 'vue'

// table数据
let tableData = reactive<TableData[]>([{
    time: '2024-1-11',
    name: '美杜莎1',
    // addr: '成都1',
    id: 1,
    tagArr: ['成都1']
}, {
    time: '2024-1-12',
    name: '美杜莎2',
    // addr: '成都2',
    id: 2,
    tagArr: ['成都2', '成都3']
}, {
    time: '2024-1-13',
    name: '美杜莎3',
    // addr: '成都3',
    id: 3,
    tagArr: ['北京1', '北京2']
}])
// table配置项
let tableOptions = reactive<TableOptions>({
    width: 200,
    border: true,
    loading: false
})
// table-column数据
let tableColumnOptionsData = reactive<TableColumnOptions[]>([
    {
        prop: 'time',
        label: '时间',
        tag: false,
    },
    {
        prop: 'name',
        label: '名称',
        tag: true,
    },
    {
        prop: 'addr',
        label: '地址',
        tag: true,
    },
])
// 操作配置
let operateOptions = reactive<OperateOptions>({
    isoperate: true,
    label: '操作',
    align: 'center',
    operatearr: [{
        text: '编辑',
        size: 'small',
        type: 'primary',
        popconfirm: false,
        showdrawer: true,
    }, {
        text: '删除',
        size: 'small',
        type: 'primary',
        popconfirm: true,
    }]
})
// 分页器配置
let pagerOptions = reactive<PagerOptions>({
    total: 3,
    CurrentPage: 1,
    PageSize: 2,
})

// 子传夫函数
const updateTableDataFn = (query: any) => {
    const { CurrentPage, PopconfirmId } = query
    console.log('CurrentPage', CurrentPage);
    console.log('PopconfirmId', PopconfirmId);
}
</script>
  
<style scoped lang="scss"></style>